<template>
	<div class="dealSell">
		<v-Content>
		<mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" :autoFill="false" >
			<div class="pershares" v-for="(item,index) in lists" @click="detail(item.id,item.status)">
		      <div class="title">
		        <div class="big">{{item.equityName}}&nbsp;&nbsp;
		          <span>{{item.equityCode}}</span>
		        </div>
		        <div class="right" :class="background(item.status)" @click.stop="unravel(item)"> 
		          <span>{{item.status | toBOT2}}</span>
		        </div>
		      </div>
		      <div class="box">
		      	 <span :class="color(item.profit)">{{item.profit | toBOT }}</span>
		      </div>
		      <div class="content">
		        <div class="grey">
		          <div class="Purchase">
		            <span>买入&nbsp;&nbsp;{{item.buyDealPrice}}</span>
		            <span style="margin-top: 0.37333rem;">现价&nbsp;&nbsp;{{item.lastPrice}}</span>
		          </div>
		          <div class="presentPrice">
		           
		            <span style="visibility:hidden">止盈&nbsp;&nbsp;{{item.depositProfit}}</span>
		            <span style="margin-top: 0.37333rem;">止损&nbsp;&nbsp;{{item.stopLossLine}}</span>
		          </div>
		          <div class="count">
		          	 <span>金额&nbsp;&nbsp;{{item.tradeCredit}}万</span>
		          	 <span style="margin-top: 0.37333rem;">数量&nbsp;&nbsp;{{item.number}}</span>
		          </div>
		        </div>
		      </div>
		      <div class="time">
		      		<span>买入时间：&nbsp;&nbsp;{{item.buyDealTime}}</span>
		      </div>
		   </div>
		 	<div style="margin:3.5rem auto;" v-show="lists.length==0">
		    	<img  style="display: block; margin: 0 auto; width: 2.66666rem; height: 2.66666rem;" src="../../assets/default_record.png" />
		    	<p style="color: #037b91; text-align: center; margin-top:0.266rem ;">暂无数据</p>
		    </div>
	   
    
   <!-- <div class="bottomTitle" v-show="lists.length>0">
      	持仓盈亏&nbsp;&nbsp;
      <span :class="color(totalProfit)">{{totalProfit}}</span>
   </div>-->
	 	</mt-loadmore> 
	 	 
	 	</v-Content>
	  <v-Button :itemdata="dataList" @toNext='login' v-show="lists.length>0"></v-Button>
	 </div>
</template>

<script>
import deal from '@/api/deal/index'
import { toast} from '@/util/index'
import {Loadmore,MessageBox} from 'mint-ui'
import Content from '@/components/ContentBottom3'
import Button from '@/components/Button2'
export default {
  data() {
    return {
      flag: -1,
      lists: [],
      fChoose:true,
      totalProfit:"",
      totalPage:"",
      pageNo:1,
      allLoaded: false, 
      scrollMode:"auto",// iphone或安卓机存在问题
      dataList:""
      
    }
  },
  components: {
        'mt-loadmore':Loadmore,
        'v-Content': Content,
        "v-Button":Button,
	},
  methods: {
   	detail(num,val){
  		if(val!=3){
  			return;
  		}
  		this.$router.push({
		            path: '/sellDetail/', 
		            name: 'sellDetail',
		            query: { 
		                id: num
		            }
		           
		        })
  	},
    color(num){
    	if(num<0){
    		 return "green";
    	}else if(num>0){
    		 return "red";
    	}else if(num== null){
    		return "gray"
    		
    	}
    },
    unravel(item) {
    	 if(item.status==3){
 			MessageBox.confirm('确认申请平仓？',"").then(()=> {
		  	   let senddata = {
					userId:window.localStorage.getItem("token"),
					id:item.id,
					plat:"mlj"
				}
				deal.toSell(senddata).then(res=>{
			        if(res.data.code==200){
			           	this.init();
			        } else if(res.data.code==222){
			            this.$router.push({path:'/login'})
			        }else{
			        	 console.log(res);
			        }
			  	})
			})
    	 	 	
	 	}
    },
    background(num){
    	if(num!=3){
    		 return "gcolor"
    	}
    },
    loadTop() {
		  	this.$refs.loadmore.onTopLoaded();
	},
	loadBottom() {
        this.pageNo += 1;
        if (this.pageNo == this.totalPage) {
          this.allLoaded = true;
        }
        setTimeout(() => {
	        let senddata = {
						page:this.pageNo,
						userId:window.localStorage.getItem("token"),
						plat:"mlj"
					}
					deal.sellList(senddata).then(res=>{
			            if(res.data.code==200){
			            	this.dataList=res.data.data;
			                this.lists = this.lists.concat(res.data.data.data.list);
											this.$refs.loadmore.onBottomLoaded();
											this.$nextTick(function () {  
					            // 原意是DOM更新循环结束时调用延迟回调函数，大意就是DOM元素在因为某些原因要进行修改就在这里写，要在修改某些数据后才能写，  
					            // 这里之所以加是因为有个坑，iphone在使用-webkit-overflow-scrolling属性，就是移动端弹性滚动效果时会屏蔽loadmore的上拉加载效果，  
					            // 花了好久才解决这个问题，就是用这个函数，意思就是先设置属性为auto，正常滑动，加载完数据后改成弹性滑动，安卓没有这个问题，移动端弹性滑动体验会更好  
				            	this.scrollMode = "touch";  
					        	});  
			            } else{
			            	 console.log(res);
			            }
			      	})
        }, 1500);
    },
    loadBottomUse(){
    	console.log("上拉刷新");
    },
    init(){
    	let senddata = {
				userId:window.localStorage.getItem("token"),//this.$store.state.token
				page:1,
				plat:"mlj"
			}
			deal.sellList(senddata).then(res=>{
	        if(res.data.code==200){
	        	this.dataList=res.data.data;
	        	//console.log(this.dataList);
	           	this.lists=res.data.data.data.list;
           		this.totalPage=res.data.data.totalPage;
	           	this.totalProfit=res.data.data.totalProfit;
	        } else if(res.data.code==222){
	            this.$router.push({path:'/login'})
	        }else{
	        	 //console.log(res);
	        }
	  	})
    },
    login(){
    	//alert("s");
    }
    
  },
  mounted(){
  	this.init();
  },
  filters:{
	  	toBOT(value){
	  		 if(value == null){
	  		 	 return "--"
	  		 }else if(value>=0){
	  		 		return "+"+value
	  		 }else if(value<0){
	  		 		return value
	  		 }
	  	},
	  	toBOT2(value){
	  		if(value==3){
	  			return "平仓"
	  		} else if(value==4) {
	  			return "待平仓"
	  		} else if(value==2){
	  			return "交易中"
	  		}else if(value==5){
	  			return "平仓中"
	  		}else if(value==9){
	  			return "平仓"
	  		}
	  	}
  }
}
</script>


<style lang="less" scoped>
@import '../../less/config.less';
.dealSell {
  .pershares {
    width: 100%;
    padding: 0 @p30;
    background-color: @liBg;
    margin-bottom: @marginbm;
  }
  .title {
  	 border-bottom: solid 1px #262a35;
    height: 1.17333rem;
    line-height: 1.17333rem;
    font-size: 0.48rem;
    color: @fcolor;
    display: flex;
    justify-content: space-between;
    align-items: center;
    div {
      display: inline-block;
    }
    span {
      color: @Color;
      font-size: 0.32rem;
    }
    .toSet {
      color: @actColor;
    }
    .right {
      width: 1.6rem;
      height: 0.8533rem;
      line-height: 0.8533rem;
      text-align: center;
      font-size: @f32;
      color: #8d4006;
      background-color: #ffdd25;
      border-radius: 0.08rem;
      span{
      	color: #8d4006;
      	font-size: @f32;
      }
    }
    .gcolor{
    	background: #cccccc;
    	span{
    		color: white;
    	}
    	
    }
  }
  .box{
  	margin: @f28 0;
  	color:@Color;
  	.gray{
  		color: #999;
        font-size: 0.48rem;
  	}
  	.red{
        color: #ff335b;
        font-size: 0.48rem;
    }
	  .green{
	  	color: #33ffc3;
	  	 font-size: 0.48rem;
	  }
  }
  .content {
    color: #ff335b;
    font-size: 0.37333rem;
   
    display: flex;
    justify-content: space-between;
    align-items: center;
    .grey {
     
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #babbbc;
      font-size: 0.32rem;
      span {
        display: block;
      }
      
      .dif {
        font-size: 0.37333rem;
      }
      .presentPrice{
      	margin:0  1.066rem;
      }
    }
    
  }
  .time{
  	color: #babbbc;
  	padding: @f28 0 @fsize;
  }
  .bottomTitle {
    width: 100%;
    height: 1.173rem;
    line-height: 1.173rem;
    position: fixed;
    bottom: 0;
    z-index: 9999;
    background-color: @liBg;
    text-align: center;
    font-size: @f28;
    color: @fcolor;
    span {
      display: inline-block;
      height: 1.17333rem;
      line-height: 1.17333rem;
      color: #ff335b;
    }
    .green{
	  	color: #33ffc3;
	 }
  }
}
</style>